import React, { Component } from 'react'
import {
  NavBar,
  Icon,
  InputItem,
  WingBlank,
  WhiteSpace,
  Button,
  Modal
} from 'antd-mobile'
import './index.css'
import msg from './msg.png'
import { sendCode } from '../../api/login/sendCode'
import { verify_code } from '../../api/register/verify_phone'


export default class VerifyCode extends Component {

  state = {
    count: 5,
    value: ''
  }

  handlecount = () => {
    let timer
    clearInterval(timer)
    timer = setInterval(() => {
      this.setState({
        count: this.state.count - 1
      })
      if (this.state.count < 1) {
        clearInterval(timer)
      }
    }, 1000);
    this.setState({
      count: 5
    })
  }

  componentDidMount() {
    this.handlecount()
  }

  iptChange = (e) => {
    // console.log(e);
    this.setState({ value: e })
  }

  btnClick = async () => {
    const result = await verify_code(this.props.phone, this.state.value.trim())
    // console.log(result);
    if (result.data.success) {
      this.props.history.push('/registerVerifyPassword')
    } else {
      alert('验证码错误！请重新输入')
    }
  }

  codebtnClick = async () => {
    await sendCode()
    // console.log(code);
    this.handlecount()
  }


  render() {
    return (
      <div className='wrap'>
        <NavBar
          mode='light'
          icon={<Icon type='left' color='#000' />}
          onLeftClick={() => this.props.history.goBack()}
        >
          硅谷注册
        </NavBar>
        <WhiteSpace size='lg'></WhiteSpace>

        <WingBlank size='lg'>
          <div className='img'>
            <img src={msg} alt='' />
          </div>
          <WhiteSpace size='lg'></WhiteSpace>
          <WingBlank size='lg'>
            <div>
              我们将以短信或电话的形式将验证码发送给您，请注意接听0575/025/0592/010等开头的电话
            </div>
          </WingBlank>
          <WhiteSpace size='lg'></WhiteSpace>

          <div className='code'>
            <InputItem clear placeholder='请输入手机验证码' value={this.state.value} onChange={this.iptChange}></InputItem>
            <button className={this.state.count < 1 ? 'active code-btn' : 'code-btn'} onClick={this.codebtnClick}>{this.state.count < 1 ? '重新发送' : `重新发送(${this.state.count}s)`}</button>
          </div>
          <WingBlank size='lg'>
            <Button className='code-next' type='warning' disabled={/^\d{6}$/.test(this.state.value) ? false : true} onClick={this.btnClick}>
              下一步
            </Button>
          </WingBlank>
          <WingBlank size='lg'>
            遇到问题了?
            <a href=''>请联系客服</a>
          </WingBlank>
        </WingBlank>
      </div>
    )
  }
}
